<template>
  <div class="app">
    <div class="header">
      <span>北京</span>
      <img src="../../assets/下箭头.png" alt="">
      <input type="text" value="请输入商品名称">
    </div>

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item><img
          src=" https://img10.yiguoimg.com/d/items/2020/201224/9288740871612824_1125x652.jpg?w=1125&h=652" alt="">
      </van-swipe-item>
      <van-swipe-item><img
          src="https://img11.yiguoimg.com/d/items/2020/201224/9288740871743896_1125x652.jpg?w=1125&h=652" alt="">
      </van-swipe-item>
      <van-swipe-item><img
          src="https://img12.yiguoimg.com/d/items/2020/201224/9288740871809432_1125x652.jpg?w=1125&h=652" alt="">
      </van-swipe-item>
    </van-swipe>


    <div class="tongzhi">
      <div class="tu">
        <img src="../../assets/1f22b5219af6ee181c04e93d5b0f651.png" alt="">
      </div>
      <van-swipe style="height: 20px;watch:50px" vertical class="lan" :autoplay="3000" indicator-color="
transparent">
        <van-swipe-item>不良信息投诉与举报</van-swipe-item>
        <van-swipe-item>营业资质公示,详情请点击查询</van-swipe-item>
      </van-swipe>
    </div>

    <div class="fahuo">
      <img src="../../assets/tomgzi.png" alt="">
    </div>

    <div class="shang">
      <div class="shang1">
        <img src="https://img14.yiguoimg.com/d/items/2020/201102/9288740833044834_300.jpg" alt="">
        <a>膳盟冷冻清尼榴莲果肉300g*2</a>
        <p>源自泰国清尼榴莲,树上自然成熟,果肉甜度高</p>
        <div class="jieshao">
          <span class="c1">¥198</span>
          <span class="c2">/2盒</span>
          <img class="aa" src="../../assets/xiaoche.png" alt="">
        </div>

      </div>
    </div>
    <div class="shang1">
      <img src="https://img11.yiguoimg.com/d/items/2020/201010/9288740791789898_300.jpg" alt="">
      <a>原膳澳洲和牛菲力牛排300g</a>
      <p>M8-9难得一见的好品质</p>
      <div class="jieshao">
        <span class="c1">¥198</span>
        <span class="c2">/2盒</span>
        <img class="aa" src="../../assets/xiaoche.png" alt="">
      </div>
    </div>
    <div class="recommend">
      <img src="https://img10.yiguoimg.com/d/items/2020/201223/9288740869646743_658x942.jpg?w=658&h=942" alt="">
      <img src="https://img10.yiguoimg.com/d/items/2020/201223/9288740869679511_658x944.jpg?w=658&h=944" alt="">
      <img src="https://img12.yiguoimg.com/d/items/2020/201224/9288740871874968_658x520.jpg?w=658&h=520" alt="">
      <img src="https://img14.yiguoimg.com/d/items/2020/201224/9288740871907736_658x521.jpg?w=658&h=521" alt="">
      <img src="https://img12.yiguoimg.com/d/items/2020/201224/9288740871973272_658x546.jpg?w=658&h=546" alt="">
      <img src="https://img13.yiguoimg.com/d/items/2020/201224/9288740872006040_658x540.jpg?w=658&h=540" alt="">
    </div>

    <div class="shang">
      <h6>年货礼包</h6>
      <div class="content">
        <template v-for="item in data">
          <div class="nian" :key="item.id">
            <img class="nb" :src="item.pictureUrl" alt="">
            <h5>{{item.commodityName}}</h5>
            <span class="c1">¥{{item.commodityPrice}}</span>
            <span class="c2">{{item.commoditySpec}}</span>
            <img class="xx" src="../..//assets/xiaoche.png" alt="">
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from "axios";
  import Vue from 'vue';
  import {
    Swipe,
    SwipeItem
  } from 'vant';

  Vue.use(Swipe);
  Vue.use(SwipeItem);



  export default {
    data() {
      return {
        data: []
      }

    },
    template: '<div>{{ data.commodityName }}</div>',
    mounted() {
      // let url = "https://api.hongbeibang.com/question/getHot?_t=1607152689639&pageIndex=0&pageSize=10&all=true&timestamp=1607152689638"
      let url = "https://www.fastmock.site/mock/c9f35a6d14adb4c434286ca22844ff69/v1/shouye"
      axios.get(url).then((res) => {
        console.log(res.Data.price)
        this.data = res.Data.price
      })
    },



  }
</script>
<style lang="scss" scoped>
  .app {
    position: relative;
    margin-bottom: 55px;
  }

  .header {
    width: 100%;
    height: 42px;
    background-color: #02B37A;
    color: #fff;
    position: fixed;
    top: 0px;
    z-index: 10000;

    span {
      margin-left: 15px;
    }

    input {
      width: 70%;
      height: 25px;
      font-size: 16px;
      border-radius: 50px;
      margin-left: 20px;
      margin-top: 5px;
    }

    img {
      width: 15px;
      height: 15px;
      margin-left: 5px;
    }

  }

  // 轮播图
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    height: 180px;
    background-color: #39a9ed;
    margin-top: 40px;

    img {
      width: 100%;
    }
  }

  .tongzhi {
    width: 100;
    height: 50px;
    position: relative;

    .tu {
      width: 25%;
      height: 40px;
      line-height: 60px;
      margin-left: 5%;
      ;
    }

    .lan {
      width: 60%;
      height: 40px;
      float: left;
      position: absolute;
      left: 30%;
      top: 28%;
      font-size: 12px;
      font-family: "宋体";
    }
  }

  .fahuo {
    img {
      width: 100%;
    }
  }

  .shang1 {
    width: 90%;
    height: 150px;
    background-color: #FAFAFA;
    margin: auto;
    border-radius: 10px;
    padding-bottom: 10px;

    img {
      width: 80px;
      height: 100px;
      margin-left: 20px;
      margin-top: 20px;
      float: left;
    }

    a {
      float: right;
      margin-top: 25px;
      margin-right: 10px;
      padding-bottom: 10px;
    }

    .jiesao {
      width: 100px;
      float: right;
    }

    p {
      font-size: 12px;
    }

    .aa {
      width: 30px;
      height: 30px;
      float: right;
      margin-top: 5px;
      margin-right: 5%;
    }
  }

  .recommend {
    img {
      width: 50%;
      margin-top: -5px;
    }
  }

  .shang {
    h6 {
      text-align: center;
    }

    .content {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      padding: 0 10px;
      .nian {
        flex: 1;
        background-color: #ffffff;
        margin:10px 10px;
        border-radius: 10px;
        text-align: center;

        .nb {
          width: 150px;
          height: 120px;
          margin-left: 5px;
        }

        h5 {
          margin-top: 15px;
        }

        .xx {
          float: right;
          margin-right: 10px;
        }
      }
    }
  }

  .c1 {
    color: red;
    font-size: 20px;
  }

  .c2 {
    color: #C9C9C9;

  }
</style>